<template>
  <basic-layout title="我" class="me-container">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <van-image
        round
        width="64"
        height="64"
        :src="userStore.userInfo?.avatar || 'https://picsum.photos/seed/avatar/200'"
        class="avatar"
      />
      <div class="user-info">
        <span class="username">{{ userStore.userInfo?.name || '未登录' }}</span>
        <span class="wx-id">微信号：wxid_xxx</span>
      </div>
      <van-icon name="arrow" class="arrow-icon" />
    </div>

    <!-- 功能九宫格 -->
    <van-grid :border="false" :column-num="4" class="menu-grid">
      <van-grid-item
        v-for="item in menuItems"
        :key="item.id"
        :icon="item.icon"
        :text="item.text"
        @click="handleGridItemClick(item)"
        :badge="item.badge"
        class="menu-item"
      >
        <template #icon>
          <div class="custom-icon" :style="{ background: item.color }">
            <van-icon :name="item.icon" :color="item.iconColor || '#fff'" size="24" />
          </div>
        </template>
        <template #text>
          <span class="menu-text">{{ item.text }}</span>
        </template>
      </van-grid-item>
    </van-grid>

    <!-- DeepSeek AI 卡片 -->
    <div class="ai-card" @click="goToDeepSeek">
      <div class="ai-content">
        <div class="custom-icon" style="background: #7232dd">
          <van-icon name="chat-o" color="#fff" size="24" />
        </div>
        <div class="ai-info">
          <span class="ai-title">DeepSeek AI 助手</span>
          <span class="ai-desc">智能AI助手，为您解答各类问题</span>
        </div>
      </div>
      <van-icon name="arrow" />
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-button">
      <van-button
        block
        round
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="handleLogout"
      >
        退出登录
      </van-button>
    </div>

    <van-cell-group inset>
      <van-cell
        title="我的相册"
        is-link
        @click="router.push('/album')"
      >
        <template #icon>
          <van-icon name="photo-o" class="cell-icon" />
        </template>
      </van-cell>
      <!-- 其他菜单项 -->
    </van-cell-group>
  </basic-layout>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { showDialog, showToast, showLoadingToast } from 'vant'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 菜单项配置
const menuItems = [
  {
    id: 'collect',
    text: '收藏',
    icon: 'star-o',
    color: '#ff976a',
    badge: '',
  },
  {
    id: 'photo',
    text: '相册',
    icon: 'photo-o',
    color: '#1989fa',
    badge: '',
  },
  {
    id: 'card',
    text: '卡包',
    icon: 'card',
    color: '#ee0a24',
    badge: 'NEW',
  },
  {
    id: 'smile',
    text: '表情',
    icon: 'smile-o',
    color: '#ffd21e',
    iconColor: '#323233', // 特殊图标颜色
    badge: '',
  },
  {
    id: 'setting',
    text: '设置',
    icon: 'setting-o',
    color: '#969799',
    badge: '',
  },
  {
    id: 'service',
    text: '服务',
    icon: 'service-o',
    color: '#07c160',
    badge: '',
  },
  {
    id: 'friends',
    text: '朋友圈',
    icon: 'friends-o',
    color: '#1989fa',
    badge: '99+',
  },
  {
    id: 'more',
    text: '更多',
    icon: 'apps-o',
    color: '#969799',
    badge: '',
  },
]

const handleGridClick = (item: typeof menuItems[0]) => {
  if (item.id === 'photo') {
    router.push('/album')
  } else {
    showToast(`点击了${item.text}`)
  }
}

const handleGridItemClick = (item: typeof menuItems[0]) => {
  handleGridClick(item)
}

const goToDeepSeek = () => {
  router.push('/deepseek')
}

const handleLogout = () => {
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    confirmButtonText: '退出',
    confirmButtonColor: '#ee0a24',
    showCancelButton: true,
    closeOnPopstate: true,
  }).then(async (action) => {
    if (action === 'confirm') {
      try {
        const loading = showLoadingToast({
          message: '退出中...',
          forbidClick: true,
          duration: 0,
        })
        await userStore.logout()
        loading.close()
        showToast({
          message: '已退出登录',
          position: 'top',
          duration: 1500,
        })
        // 清除路由历史
        router.replace('/login')
      } catch (error) {
        showToast({
          message: '退出失败，请重试',
          type: 'fail',
          duration: 2000,
        })
      }
    }
  })
}
</script>

<style lang="less" scoped>
.me-container {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 12px;

  .user-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .avatar {
      border: 1px solid #eee;
      flex-shrink: 0;
    }

    .user-info {
      flex: 1;
      margin-left: 16px;
      display: flex;
      flex-direction: column;
      gap: 4px;

      .username {
        font-size: 18px;
        font-weight: 500;
        color: #323233;
      }

      .wx-id {
        font-size: 14px;
        color: #969799;
      }
    }

    .arrow-icon {
      color: #969799;
    }
  }

  .menu-grid {
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    :deep(.van-grid-item) {
      &__content {
        padding: 16px 8px;
        background: transparent;

        &::after {
          display: none;
        }
      }

      .custom-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        transition: transform 0.2s;
      }

      .menu-text {
        font-size: 12px;
        color: #323233;
      }

      &:active {
        .custom-icon {
          transform: scale(0.9);
        }
      }
    }
  }

  .ai-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .ai-content {
      display: flex;
      align-items: center;
      gap: 12px;

      .ai-info {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .ai-title {
          font-size: 16px;
          font-weight: 500;
          color: #323233;
        }

        .ai-desc {
          font-size: 12px;
          color: #969799;
        }
      }
    }

    &:active {
      background: #f2f3f5;
    }

    .custom-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .logout-button {
    margin-top: 24px;
    padding: 0 16px;

    .van-button {
      height: 44px;
      font-size: 16px;
      font-weight: 500;
    }
  }
}
</style>
